import { FC, useState, useEffect } from 'react';
import { Space, Card, Form, Input, Button, InputNumber, Radio } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';

/* eslint-disable no-template-curly-in-string */
const validateMessages = {
  required: '${label} is required!',
  types: {
    email: '${label} is not a valid email!',
    number: '${label} is not a valid number!',
  },
  number: {
    range: '${label} must be between ${min} and ${max}',
  },
};
/* eslint-enable no-template-curly-in-string */

const Index: FC = () => {
  const onFinish = (values: any) => {
    console.log(values);
  };
  return (
    <Space direction="vertical" style={{ display: 'flex' }}>
      <Card title="注册表单">
        <Form
          // {...layout}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          name="nest-messages"
          onFinish={onFinish}
          validateMessages={validateMessages}
        >
          <Form.Item
            name={['user', 'name']}
            label="Name"
            rules={[{ required: true }]}
          >
            <Input />
          </Form.Item>
          <Form.Item name={['user', 'sex']} label="性别">
            <Radio.Group>
              <Radio value={1}>A</Radio>
              <Radio value={2}>B</Radio>
              <Radio value={3}>C</Radio>
              <Radio value={4}>D</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item
            name={['user', 'age']}
            label="Age"
            rules={[{ type: 'number', min: 0, max: 99 }]}
          >
            <InputNumber />
          </Form.Item>
          <Form.Item name={['user', 'website']} label="Website">
            <Input />
          </Form.Item>
          <Form.Item name={['user', 'introduction']} label="Introduction">
            <Input.TextArea />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </Space>
  );
};

export default Index;
